<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/question' }">试卷列表·详情</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <el-descriptions loading="loading" border direction="vertical" v-loading="loading" title="试卷详细" :column="6">
                    <el-descriptions-item label="测试名" :span="4" label-class-name="my-label" class-name="my-content">
                        <el-tag>{{ tabData.name }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="时间">
                        <el-tag>{{ tabData.createTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="类型" :span="2">
                        <el-tag>{{ tabData.type == 1 ? '普通试卷' : '困难试卷' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="组试方式" :span="2">
                        <el-tag>{{ tabData.mode == 1 ? '人工组卷' : '随机组卷' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="作者" :span="2">
                        <el-tag>{{ tabData.author }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="标签" width="200" :span="2">
                        <el-tag>{{ tabData.labels }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="发布" label-class-name="my-label" class-name="my-content" :span="2">
                        <el-tag class="ml-2" :type="tabData.isPublish == 0 ? 'danger' : 'success'">
                            {{ tabData.isPublish == 0 ? '否' : '是' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="禁用" label-class-name="my-label" class-name="my-content" :span="2">
                        <el-tag class="ml-2" :type="tabData.isBan == 0 ? 'danger' : 'success'">
                            {{ tabData.isBan == 0 ? '否' : '是' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="使用次数" label-class-name="my-label" class-name="my-content">
                        <el-tag>{{ tabData.useCount }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="难度" :span="2">
                        <el-tag>{{ tabData.lv }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="题目数量" :span="2">
                        <el-tag>{{ tabData.count }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="题目详情" :span="6">
                        <el-table :data="tabData.questions" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column prop="content" label="题干" />
                            <el-table-column label="题类">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.type == 1 ? '选择题' : '填空题' }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="分数">
                                <template #default="scope">
                                    <el-tag type="warning">{{ scope.row.score }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="labels" label="标签" />
                            <el-table-column prop="lv" label="难度" />
                        </el-table>
                    </el-descriptions-item>
                    <el-descriptions-item label="考试详情" :span="6">
                        <el-table :data="tabData.arranges" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column prop="name" label="安排" />
                            <el-table-column label="开始时间">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.createTime }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="结束时间">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.endTime }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="阅卷" width="100">
                                <template #default="scope">
                                    <el-tag
                                        :type="scope.row.isStart == null ? 'success' : 'warning'">{{ scope.row.isStart == null ? '已阅卷' : '未阅卷' }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="安排人数" width="100">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.allCount }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="交卷人数">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.completeCount }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="及格率">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.examCount }}%</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="平均分">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.avgScore }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" plain size="small" color="#626aef"
                                        @click="select(scope.row)">详细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypeDetailDto } from '../../../type/question'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetSingleTestPaper } from '../../../api/testpaper/testpaper'
import { ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();
        const route = useRoute()

        const data = reactive<TypeDetailDto>({
            isBan: -1,      // 禁用 
            isPublish: -1,  // 发布 
            loading: true,  // 加载屏 
            disabled: true,  //是否禁用
            content: '',
            createTime: '',
            explain: '',
            labels: '',
            tabData: [],
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            // 考试详情
            select(val:any){
                router.push({ path:`/exam/arrange/review/${val.id}` })
            },

            //查询题目
            bind() {
                GetSingleTestPaper({
                    id: route.params.id
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        data.tabData = res.data
                        console.log(res)
                    }
                })

            }

        }

        onMounted(() => {
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

.text {
    width: 80%;
    display: inline-block;
    margin-top: 5px;
    border-radius: 5px;
    padding-left: 1vw;
}

.text2 {
    width: 15%;
    display: inline-block;
    margin-top: 5px;
    color: rgb(237, 139, 27);
    font-weight: 500;
    margin-left: 1vw;
    border-radius: 5px;
    padding-left: 1vw;
}


.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}
</style>
